import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./project.module.less";
import { ProjectCollaborationData } from "@type";
import projectIconPNG from "./projectIcon.png";
import projectCollaborationStore from "../projectCollaborationStore";
import clsx from "clsx";
import { Button, Dropdown, message } from "antd";
import { EllipsisOutlined } from "@ant-design/icons";
import userStore from "@views/userStore";
import hashHistory from "@hashHistory";

interface Iprops {
    children?: ReactNode
}

// 新增项目
export default function AddProject() {
    const dom = useRef<HTMLInputElement | null>(null);
    const [data, setData] = useState({});
    const [editorName, setEditorName] = useState(false);

    useEffect(() => {
        // setEditorName(false);
    }, []);

    useEffect(() => autorun(() => {

    }), []);

    //创建
    const creat = async () => {
        const value = dom.current?.value;
        if (value) {
            await projectCollaborationStore.add(value, "项目描述");
            projectCollaborationStore.setIsAdd(false);
        }
    }
    //取消
    const cancel = () => {
        projectCollaborationStore.setIsAdd(false);
    }

    return (
        <div className={styles.project}        >
            <img
                alt=""
                src={projectIconPNG}
                className={styles.icon}
                onClick={() => { }}
            />
            <input
                type="text"
                maxLength={16}
                className={styles.input}
                autoFocus
                placeholder="请输入项目名称"
                ref={dom}
            // onBlur={async (e) => {
            //     const name = (e.target as HTMLInputElement).value;
            // }}
            />
            <div className={styles.btns} >
                <span className={clsx(styles.btn, styles.active)} onClick={creat} >创建</span>
                <span className={styles.btn} onClick={cancel} >取消</span>
            </div>
        </div>
    );

}